<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/列表页.css">
    <link rel="stylesheet" href="./css/通用css样式.css">
    <link rel="stylesheet" href="./css/底部通用样式.css">
    <script src="./js/计算缩放.js"></script>
    <script src="./js/jq.js"></script>
    <script src="./js/zepto-touch.js"></script>
</head>

<body>

    <!-- 顶部搜索框 -->

    <div class="search">
        <div class="search_a">
            <input type="text" placeholder="请输入小区名或商圈名称" class="search_">
            <span class="wire"></span>
        </div>

    </div>

    <!-- 隐藏ul列表 -->
    <div class="classify">
        <!-- <img src="./image/SecondHandList/i_down.gif" alt=""> -->
        <ul class="area">
            <li>
                区域
                <img src="./image/SecondHandList/i_down.gif" alt="" class="img_">
                <ul class="hide">
                    <li class="hide_">
                        <span>区域</span>

                        <ul>
                            <li>附近</li>
                            <li>不限</li>
                            <li>朝阳</li>
                            <li>海淀</li>
                            <li>昌平</li>
                            <li>丰台</li>
                            <li>石景山</li>
                        </ul>
                        <ul>
                            <li>不限</li>
                            <li>安贞</li>
                            <li>奥林匹克公园</li>
                            <li>首子湾</li>
                            <li>北工大</li>
                            <li>北苑</li>
                            <li>CBD</li>

                        </ul>
                    </li>

                    <li class="hide_a">
                        <span>
                            地铁
                        </span>
                    </li>
                </ul>
            </li>

            <li>
                价格
                <img src="./image/SecondHandList/i_down.gif" alt="">
                <ul class="hide_p">

                    <li>不限</li>
                    <li>100万以下</li>
                    <li>100万-150万</li>
                    <li>150万-200万</li>
                    <li>200万-250万</li>
                    <li>250万-300万</li>
                    <li>
                        <span>自定义价格</span>
                        <span class="xx">最小</span>
                        <span class="xx">最大</span>

                    </li>

                </ul>
            </li>

            <li>
                房型
                <img src="./image/SecondHandList/i_down.gif" alt="">
                <ul class="hide_i">

                    <li>不限</li>
                    <li>1室</li>
                    <li>2室</li>
                    <li>3室</li>
                    <li>4室</li>
                    <li>5室</li>
                    <li>
                        <button class="qq">确认</button>

                    </li>
                </ul>
            </li>

            <li>
                更多
                <img src="./image/SecondHandList/i_down.gif" alt="">
                <div class="more_l">
                    <ul class="more">
                        <p>区域</p>
                        <div>
                            <li>南</li>
                            <li>南北</li>
                            <li>东</li>
                            <li>西</li>
                            <li>北</li>
                        </div>

                    </ul>
                    <ul class="more_">
                        <p>面积（平米）</p>
                        <div>
                            <li>50以下</li>
                            <li>50-70</li>
                            <li>70-90</li>
                            <li>90-100</li>
                            <li>110-130</li>
                            <li>130-150</li>
                            <li>150-200</li>
                            <li>200以上</li>
                        </div>

                    </ul>
                    <ul class="more_a">
                        <p>标签</p>
                        <div>
                            <li>学区房</li>
                            <li>地铁房</li>
                            <li>不限购</li>
                            <li>满两年</li>
                            <li>满五唯一</li>
                            <li>降价</li>
                            <li>新上</li>
                            <li>独家</li>
                            <li>有钥匙</li>
                        </div>

                    </ul>
                </div>
            </li>
        </ul>

        <!-- 房源详情 -->
        <ul class="particulars">
            <li>
                <img src="./image/SecondHandList/img1.png" alt="">

                <ul>
                    <li>
                        <p>西便门外大街2室1厅89平</p>
                        <p>南北 高楼层/6层</p>
                        <p>签约价格：13244元/平 <span>1105万</span></p>
                        <p>签约日期：2015年11月10日</p>
                    </li>
                </ul>
            </li>

        </ul>
        <ul class="particulars">
            <li>
                <img src="./image/SecondHandList/img2.png" alt="">

                <ul>
                    <li>
                        <p>金桥国际 1室1厅 63平</p>
                        <p>南北 高楼层/6层</p>
                        <p>签约价格：13244元/平 <span>905万</span></p>
                        <p>签约日期：2015年11月10日</p>
                    </li>
                </ul>
            </li>

        </ul>
        <ul class="particulars">
            <li>
                <img src="./image/SecondHandList/img3.png" alt="">

                <ul>
                    <li>
                        <p>花涧溪二期2室2厅90平</p>
                        <p>南北 高楼层/6层</p>
                        <p>签约价格：13244元/平 <span>1322万</span></p>
                        <p>签约日期：2015年11月10日</p>
                    </li>
                </ul>
            </li>

        </ul>
        <!-- 底部通用样式 -->
        <div class="base">
            <p class="base_">北京找房无忧网>首页</p>
            <div class="base_a">
                <div class="base_s">
                    <img src="./image/index/apple.png" alt="">
                    <div>
                        <p>iphone</p>
                        <p>客户端</p>
                    </div>
                </div>
                <div class="base_s">
                    <img src="./image/index/android.png" alt="">
                    <div>
                        <p>iphone</p>
                        <p>客户端</p>
                    </div>
                </div>
            </div>

            <div class="base_q">
                <p>北京找房无忧房地产经纪有限公司</p>
                <p>网络经营许可证 京ICP备20160812号-12</p>
            </div>
        </div>

    </div>



</body>
<script>
    // var img_ = document.querySelector('.img_');
    // var hide = document.querySelector('.hide');
    // img_.onclick = function() {
    //     hide.style.display = 'block';
    // }
    // $(function() {
    //     $('.img_').click(function() {
    //         $('.hide').toggle();
    //     })
    // })
</script>

</html>